﻿<!DOCTYPE html>
<html>
	{% include 'haoAdmin/head.html' %}
    <script src="{{url_for('static', filename='js/layout.js')}}"></script>

	<body>
		<div class="layui-layout layui-layout-admin beg-layout-container">
			<div class="layui-header beg-layout-header">
				<div class="beg-layout-main beg-layout-logo">
					<a href="https://github.com/chenghao" target="_blank">那脸憔悴</a>
				</div>
				<div class="beg-layout-main beg-layout-side-toggle">
					<i class="fa fa-bars" aria-hidden="true"></i>
				</div>

				<!--一级菜单-->
				<div class="beg-layout-main beg-layout-menu" id="menu">
					<ul class="layui-nav beg-layout-nav" lay-filter="" id="menus">
                        {% for m in result %}
							{% if m.index == 0 %}
								<li class="layui-nav-item layui-this">
							{%else%}
								<li class="layui-nav-item">
							{%endif%}
								<a href="javascript:;" data-module-id="{{m.pid}}">
									<i class="fa fa-desktop" aria-hidden="true"></i>
									<cite>{{m.title}}</cite>
								</a>
							</li>
						{% endfor %}
					</ul>
				</div>

				<div class="beg-layout-main beg-layout-panel">
					<ul class="layui-nav beg-layout-nav" lay-filter="user">
						<li class="layui-nav-item">
							<a href="javascript:;" class="beg-layou-head">
								<img src="{{url_for('static', filename='images/0.jpg')}}" />
								{#<span>beginner</span>#}
							</a>
							<dl class="layui-nav-child">
								<dd>
									<a href="javascript:;" data-tab="true" data-url='user.html'>
										<i class="fa fa-user-circle" aria-hidden="true"></i>
										<cite>个人信息</cite>
									</a>
								</dd>
								<dd>
									<a href="javascript:;" data-tab="true" data-url="setting.html">
										<i class="fa fa-gear" aria-hidden="true"></i>
										<cite>设置</cite>
									</a>
								</dd>
								<dd>
									<a href="javascript:;" id="logout">
										<i class="fa fa-sign-out" aria-hidden="true"></i>
										<cite>注销</cite>
									</a>
								</dd>
							</dl>
						</li>
					</ul>
				</div>
			</div>

			<!--侧边导航栏-->
			<div class="layui-side beg-layout-side" id="side" lay-filter="side"></div>

			<!--内容区域-->
			<div class="layui-body beg-layout-body">
				<div class="layui-tab layui-tab-brief layout-nav-card" lay-filter="layout-tab" style="border: 0; margin: 0;box-shadow: none; height: 100%;">
					<ul class="layui-tab-title">
						<li class="layui-this">
							<a href="javascript:;">
								<i class="fa fa-dashboard" aria-hidden="true"></i>
								<cite>首页</cite>
							</a>
						</li>
					</ul>

					<div class="layui-tab-content">
						<div class="layui-tab-item layui-show">
							<iframe src=""></iframe>
						</div>
					</div>
				</div>
			</div>

			<!--页脚-->
			<div class="layui-footer beg-layout-footer">
				<p>2017 &copy;
					<a href="https://github.com/chenghao">github.com/chenghao</a>
				</p>
			</div>
		</div>

		<div id="contextmenu" class="layout-tab-contextmenu">
			<ul class="layui-nav " lay-filter>
				<li class="layui-nav-item " data-toggle="closeCurrent">
					<a href="#">关闭当前</a>
				</li>
				<li class="layui-nav-item " data-toggle= "closeAll">
					<a href="#">关闭所有</a>
				</li>
			</ul>
		</div>

		<script>
			///////////////////////////// 右击菜单 //////////////////////////////////
            //这是js的枚举，哈哈。
			var closedEnum = {
				closeCurrent:'closeCurrent', //关闭当前
				closeAll:'closeAll'          //关闭所有
			};

            $(function () {
                $(".layui-tab-content iframe", parent.document.body).attr("src", remoteUrl + "home");
            });

            //退出
            $("#logout").click(function () {
                _confirm("确定退出吗？", function(){
                    ajaxReq("auth/logout", function(data){
                        if(data.code == 0){
                            customHref("auth/login");
                        }else{
                            layer.msg(d.msg, error_layer_option)
                        }
                    }, {}, "post");
                });
            });

            //右击事件
            var $contextMenu = $('#contextmenu');
            $(document).on('mousedown', '.layout-nav-card > ul.layui-tab-title', function (e) {
                //防止事件冒泡
                e.preventDefault();
                //鼠标右击
                if(e.which === 3) {
                    var $this = $(e.target);
                    //元素定位
                    $contextMenu.css({
                        left: e.pageX-2,
                        top: e.pageY-2
                    }).show()
                    .children('ul.layui-nav').children('li.layui-nav-item').each(function () {
                        var $that = $(this);
                        //绑定点击事件
                        $that.on('click', function () {
                            var toggle = $that.data('toggle');
                            var localName = $this[0].localName;
                            var $li;
                            if (localName === 'ul') {
                                $li = $this.children('li.layui-this');
                            } else if (localName === 'i' || localName === 'cite') {
                                $li = $this.parent('li');
                            } else {
                                $li = $this;
                            }
                            switch (toggle) {
                                //关闭当前标签
                                case closedEnum.closeCurrent:
                                    $li.children('i.layui-tab-close').click();
                                    $($contextMenu).hide();
                                    break;
                                case closedEnum.closeAll:
                                    var lis = $(".layui-tab-title li");
                                    $.each(lis, function(i, t){
                                        $(t).children('i.layui-tab-close').click();
                                    });
                                    $($contextMenu).hide();
                                    break;
                                default:
                                    break;
                            }
                        });
                    });

                    $contextMenu.on('mouseover', function (e) {
                        $(this).show();
                    }).on('mouseout', function () {
                        $(this).hide();
                    });
                }
            });
            //禁用鼠标右键
            $(document).bind("contextmenu ", function(e) {
                e.returnValue=false;
                return false;
            });

		</script>

	</body>

</html>
